<template>
  <div class="activities-main">
    <div class="nav">
      <van-tabs v-model="active" animated @click="changeNav">
        <van-tab v-for="(navItem, index) in navList" :key="index" :title="navItem.txt">
          <pull-up-reload
            :on-infinite-load="onInfiniteLoad"
            :parent-pull-up-state="infiniteLoadData.pullUpState"
            style="padding-bottom: 0px;">
            <ul class="active-list" v-if="dataList.length > 0">
              <li
                class="line-bottom"
                v-for="(item, id) in dataList"
                :key="id"
                @click="toDetail(item.id)">
                <div class="active-box flex">
                  <div :class="[{'filter': item.type === 2}, 'img pr']">
                    <img :src="item.pic" alt="">
                    <img class="sub pa" :src="item.type === 2 ? activitieImg2 : activitieImg1" alt="">
                  </div>
                  <div :class="[{'filter': item.type === 2}, 'describe'] ">
                    <p class="title color45454D fs17 clamp2">{{item.title}}</p>
                    <p class="time fs15 clamp1">
                      <i class="iconfont iconshijian3"></i>
                      {{item.time}}
                    </p>
                    <p class="time fs15 clamp1" v-if="item.add">
                      <i class="iconfont iconwodeshouhuodizhix"></i>
                      {{item.add}}
                    </p>
                  </div>
                </div>
              </li>
            </ul>
          </pull-up-reload>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import PullUpReload from '../../components/PullUpReload.vue'

  import activitieImg1 from '../../assets/img/icon_activitie1.png'
  import activitieImg2 from '../../assets/img/icon_activitie2.png'
  export default {
    components:{
      PullUpReload
    },
    data() {
      return {
        active: 0,
        navList: [
          {
            id:1,
            txt: '商城活动'
          },
          {
            id:2,
            txt: '直播活动'
          },
          {
            id: 3,
            txt: '线下活动'
          },
          {
            id: 4,
            txt: '健康交流吧'
          }
        ], // 导航
        dataList: [
          {
            id: 1,
            pic: 'https://img.houzi8.com/qiantu-cover/0e9a2f66ea00d5eac76dd7d0b2a55890.jpg',
            title: '新用户专享首单',
            time: '10月24日—10月30日',
            type: 1
          },
          {
            id: 2,
            pic: 'https://img.houzi8.com/qiantu-cover/0e9a2f66ea00d5eac76dd7d0b2a55890.jpg',
            title: '新用户专享首单即送豪华大礼包先到先得2',
            time: '10月24日—10月30日',
            type: 2
          },
          {
            id: 3,
            pic: 'https://img.houzi8.com/qiantu-cover/0e9a2f66ea00d5eac76dd7d0b2a55890.jpg',
            title: '新用户专享首单即送豪华大礼包先到先得3',
            time: '10月24日—10月30日',
            type: 2
          },
          {
            id: 4,
            pic: 'https://img.houzi8.com/qiantu-cover/0e9a2f66ea00d5eac76dd7d0b2a55890.jpg',
            title: '新用户专享首单即送豪华大礼包先到先得4',
            time: '10月24日—10月30日',
            add: '广州市迎宾大道119号',
            type: 1
          },
          {
            id: 5,
            pic: 'https://img.houzi8.com/qiantu-cover/0e9a2f66ea00d5eac76dd7d0b2a55890.jpg',
            title: '新用户专享首单即送豪华大礼包先到先得5',
            time: '10月24日—10月30日',
            add: '广州市迎宾大道119号'
          },
        ],
        activitieImg1: activitieImg1,
        activitieImg2: activitieImg2,
        page: 1,
        // 上拉加载的设置
        infiniteLoadData: {
          initialShowNum: 3, // 初始显示多少条
          everyLoadingNum: 3, // 每次加载的个数
          pullUpState: 0, // 子组件的pullUpState状态
          pullUpList: [], // 上拉加载更多数据的数组
          showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数
        },
        isPost: false, //是否请求中
        isNone: false, //是否无更多数据加载

      }
    },
    methods: {
      // 详情
      toDetail(id) {
        console.log('id--', id);
//        this.$router.push({
//          name: '',
//          query: {id: id}
//        })
      },
      // 切换栏目
      changeNav(index) {
        console.log(index);
        $('img').height($('img').width())
      },
      // 上拉加载
      onInfiniteLoad (done) {
        if (this.infiniteLoadData.pullUpState === 0 && !this.isNone) {
//          this.getPullUpMoreData()
        }
        done()
      }
    },
  }
</script>

<style lang="scss">
  @import '../../assets/css/activities.scss';
</style>
